<template>
    <div class="student-list">
        <div class="pb10">
            <el-button icon="el-icon-back" type="primary" size="mini" @click="$router.go(-1)">返回</el-button>
        </div>
        <div class="grouper">群主姓名：{{grouperName}}<br>学员数量: {{groupMumberCount}}</div>
        <el-table :data="groupMembers" stripe style="width: 100%" class="pt10">
            <el-table-column label="头像">
                <template slot-scope="{row}">
                    <img :src="row.customerHeadImageUrl" class="avatar">
                </template>
            </el-table-column>
            <el-table-column prop="customerNickName" label="微信昵称"></el-table-column>
            <el-table-column prop="classCountCardinality" label="学习课程数"></el-table-column>
            <el-table-column prop="totalShareCount" label="分享人数"></el-table-column>
            <el-table-column label="加入时间">
                <template slot-scope="{row}">
                    {{row.createTime | dateFormat('yyyy-MM-dd')}}
                </template>
            </el-table-column>
        </el-table>
        <el-pagination v-if="groupMumberCount>20" layout="prev, pager, next" :page-size="20" :total="groupMumberCount" @current-change="pageChange"></el-pagination>
    </div>
</template>

<script>
    import { getCustomers } from '@/api'
    export default {
        data(){
            return {
                grouperName: '',
                groupMumberCount: 0,
                groupMembers: [],
                filterPms: {
                    holderId: this.$route.params.id, 
                    limit: 20,
                    offset: 0
                },
            }
        },
        created(){
            this.getCustomers()
        },
        methods: {
            pageChange(v) {
                this.filterPms.offset = (v - 1) * 20
                this.getCustomers()
            },
            getCustomers(){
                getCustomers(this.filterPms).then( res => {
                    let info = res.data.result
                    this.groupMembers = info.detail
                    this.grouperName = info.holderNickname
                    this.groupMumberCount = info.totalCount
                })
            }
        },
    }
</script>

<style scoped lang="scss">
    .student-list /deep/ {
        .grouper{
            font-size: 16px;
            line-height: 30px;
        }
        img.avatar{
            width: 40px;
            height: 40px;
            border-radius: 50%;
        }
        .el-pagination {
            text-align: right;
            padding: 20px 5px;
        }
    }
</style>